import React from "react";

function TextColor(props){
    //计算名字的字节数，用于计算svg宽度
    const computeLength = (str) => {
        var bytesCount = 0;
        for (var i = 0; i < str.length; i++){
            var c = str.charAt(i);
            if (/^[\u0000-\u00ff]$/.test(c)){//匹配单字节
            bytesCount += 1;
            } else {
            bytesCount += 2;
            }
        }
        return bytesCount;
    }
    var name = props.text;
    return (
    <svg width={computeLength(name)*8.5} height="22" className="name_color">
        <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style={{stopColor: "red", stopOpacity:1}} />
            <stop offset="100%" style={{stopColor: "blue", stopOpacity:0.6}} />
        </linearGradient>
        </defs>
        <text x="0" y="16" fill="url(#grad)" style={{fontSize:"16px",fontWight: "bold"}}>{name}</text>
    </svg>
    )
}

export default TextColor;